/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Row, Col, Divider, Typography, Spin } from 'antd';
import { connect } from 'dva';
import pageConfig from './orderPageConfig';

const { Title } = Typography;

@connect(({ orderRecord, loading }) => ({
  orderRecord,
  getOrderDetail: loading.effects['orderRecord/getOrderRecordDetail'],
}))
export default class OrderDetail extends Component {
  constructor(props) {
    super(props);
    const { sourceType } = props;
    this.state = {
      record: {},
    };
    // eslint-disable-next-line max-len
    this.pageConfig = pageConfig.call(this, sourceType); // sourceType 区分业务员（operator），微商（derivative），驿站（yz）
    const { actionTypes } = this.pageConfig;
    this.actionTypes = actionTypes;
  }

  state = {
    record: {},
  };

  componentDidMount() {
    // id可能是具体的单号，或者是从列表带来的数据
    const { dispatch, id, sourceType, records = {} } = this.props;
    const { getDeatil } = this.actionTypes;
    let payload = {};
    if (sourceType == 'derivative') {
      payload = { waybill_no: records.waybill_no, retail_id: records.retail_id };
    } else {
      payload = { id };
    }

    if (typeof id == 'string') {
      dispatch({
        type: getDeatil,
        payload,
      }).then(res => {
        this.setState({
          record: res.data,
        });
      });
    } else {
      this.setState({
        record: id,
      });
    }
  }

  render() {
    const { children, getOrderDetail = false } = this.props;
    const { record } = this.state;
    const {
      order_no,
      order_time,
      order_status,
      courier_name,
      courier_mobile,
      waybill_no,
      is_real_name,
      sender_name,
      sender_phone,
      sender_province,
      sender_city,
      sender_area,
      remark,
      goods_type,
      goods_weight,
      receive_name,
      receive_phone,
      receive_province,
      receive_city,
      receive_area,
      receive_address,
      create_time,
      waybill_status,
      receiver_name,
      receiver_mobile,
      receiver_province,
      receiver_city,
      receiver_district,
      receiver_address,
      sender_mobile,
      realname_status_name,
      item = {},
      courier = {},
      note,
    } = record;
    const { item_weight, item_name } = item;
    const { courier_mobile: ws_courier_mobile, courier_name: ws_courier_name } = courier;
    return (
      <div className="order-detail">
        <Spin spinning={getOrderDetail}>
          <Row type="flex" justify="space-between" gutter={[24, 24]}>
            <Col>
              <Title level={3}>订单详情</Title>
            </Col>
            <Col>{children}</Col>
          </Row>
          <Divider />
          <Row gutter={[16, 16]}>
            <Col span={8}>
              <h3 style={{ fontWeight: 'bolder' }}>订单信息</h3>
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={8}>
              <span>订单编号：</span>
              <span>{order_no}</span>
            </Col>
            <Col span={8}>
              <span>下单时间：</span>
              <span>{order_time || create_time}</span>
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={8}>
              <span>订单状态：</span>
              <span>{order_status || waybill_status}</span>
            </Col>
            <Col span={8}>
              <span>受理业务员：</span>
              <span>
                {courier_name || ws_courier_name || '暂无'}（
                {courier_mobile || ws_courier_mobile || '暂无'}）
              </span>
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={5}>
              <span>运单号：</span>
              <span>{waybill_no}</span>
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={5}>
              <span>实名状态：</span>
              <span>{is_real_name || realname_status_name || '暂无'}</span>
            </Col>
          </Row>
          <Divider />
          <Row gutter={[16, 16]}>
            <Col span={5}>
              <h3 style={{ fontWeight: 'bolder' }}>面单信息</h3>
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <span>发件人信息：</span>
              <span>
                {sender_name}，{sender_phone || sender_mobile}，{sender_province}，{sender_city}，
                {sender_area}
              </span>
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <span>收件人信息：</span>
              <span>
                {receive_name || receiver_name}，{receive_phone || receiver_mobile}，
                {receive_province || receiver_province}，{receive_city || receiver_city}，
                {receive_area || receiver_district}，{receive_address || receiver_address}
              </span>
            </Col>
          </Row>

          <Divider />
          <Row gutter={[16, 16]}>
            <Col span={5}>
              <h3 style={{ fontWeight: 'bolder' }}>物品信息</h3>
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={5}>
              <span>发件物品类型：</span>
              <span>{goods_type || item_name || '暂无'}</span>
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={5}>
              <span>物品重量：</span>
              <span>{goods_weight || item_weight || '暂无'}</span>
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={5}>
              <span>备注信息：</span>
              <span>{remark || note || '暂无'}</span>
            </Col>
          </Row>
        </Spin>
      </div>
    );
  }
}

OrderDetail.propTypes = {
  id: (PropTypes.string || PropTypes.object).isRequired,
  sourceType: PropTypes.string.isRequired,
};
